﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <div class="layui-bg-gray" style="padding: 16px;">
        <div class="layui-panel" style="width:500px;">
            <div class="layui-card">
                <div class="layui-card-header">
                    物料与服务类型
                    @* 弹出框 *@
                    <button type="button" style="float:right" class="layui-btn layui-icon layui-icon-addition" id="openLayerBtn">新增节点</button>
                </div>
                <div class="layui-card-body">
                    @* 树形结构 *@
                    <div id="ID-tree-demo-showLine"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 使用layui的layer模块
        layui.use(['tree', 'layer', 'jquery'], function () {
            var tree = layui.tree;
            var $ = layui.jquery; // 确保引入了 jQuery，因为您使用了 $.ajax
            var layer = layui.layer;

            //定义ID获取父级ID
            var pId = 0;

            //获取树形数据
            $.ajax({
                url: '@ViewBag.RedDragonWrite' + "/api/MaterialManagements/SearcMaterialCategory",
                type: 'get',
                dataType: 'json',
                success: res => {
                    console.log(res.data)
                    if (res.code == 0) {
                        // 数据返回成功，开始渲染树形控件
                        tree.render({
                            elem: '#ID-tree-demo-showLine',
                            data: res.data, // 直接使用返回的数据
                            customName: { // 自定义 data 字段名
                                id: 'materialCategoryId', // 注意这里要与您的数据字段名匹配
                                title: 'materialCategoryName', // 注意这里要与您的数据字段名匹配
                                children: 'children',
                            },
                            showLine: false,  // 是否开启连接线
                            // onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                            click: function (obj) {
                                console.log(JSON.stringify(obj.data.materialCategoryId));//得到当前点击的节点数据
                                pId = obj.data.materialCategoryId;//赋值
                            },
                        });
                    }
                }
            });

            // 绑定按钮点击事件
            $('#openLayerBtn').on('click', function () {
                layer.open({
                    type: 2,
                    title: '物料与服务类型',
                    area: ['550px', '500px'],
                    content: '/MaterialManagements/CreateMaterialCategory?Pid=' + pId,
                    end: function () { // 弹出层关闭后执行的回调
                        location.reload(); // 父页面刷新
                    }
                });
            });
        });
    </script>
</body>
</html>